import { memo, useCallback, useMemo, useReducer } from "react";

interface IState{
  num: number;
}
interface IAction{
  type: string;
  payload?: any;
}
const ChildWrap = memo(Child);
const UseReducer = ()=>{
  const reducer = (state: IState, action: IAction)=>{
    switch (action.type) {
      case '+':
        return {...state, num: ++state.num};
      case '-':
        return {...state, num: --state.num};
      default:
        return state
    }
  }
  const [state, dispatch] = useReducer(reducer, {num: 100});
  // 使用useMemo包裹属性
  const attrs = useMemo(()=>({}), []);
  const cb = useCallback(()=>({}), []);


  return <div>
    <button onClick={()=>{
      dispatch({
        type: '+'
      })
    }}>+</button>
    <span>{state.num}</span>
    <button onClick={()=>{
      dispatch({
        type: '-'
      })
    }}>-</button>
    <ChildWrap attrs={attrs} cb={cb}></ChildWrap>
  </div>
}

interface IProps{
  attrs: {},
  cb: (params: any)=>void
}
function Child(props: IProps) {
  return <p>北京时间：{+new Date()}</p>
}

export default UseReducer;
